<template>
	<view class="city">
		<scroll-view :scroll-into-view="scrollIntoId"  scroll-y="true" :scroll-with-animation="true" :style="{height:windowHeight}">
			<view class="state" id="state">
				<view class="state-box-out">
					<view class="uni-flex uni-row state-box">
						<view class="text" :class="{'actived':isStateIn}" @tap="stateIn">境内</view>
						<view class="text" :class="{'actived':!isStateIn}" @tap="stateOut">境外*港澳台</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="hot-city" id="hostCity">
					<view class="title">热门城市</view>
					<view class="hot-city-content">
						<view class="hot-city-item_flex" v-for="(groupItem,index) in hotCities" :key="index">
							<view class="hot-city-item text-hidden" v-for="(hotCity,index2) in groupItem" :key="index2">
								{{ hotCity }}
							</view>
						</view>
					</view>
					<view class="border"></view>
				</view>
				<view class="alphabet" id="alphabet">
					<view class="title">字母排序</view>
					<view class="alphabet-content">
						<view class="alphabet-item_flex" v-for="(alpha,index) in alphabet" :key="index">
							<view class="alphabet-item" v-for="(char,index2) in alpha" :key="index2" @tap="alphaClick(char)">
								{{char}}
							</view>
						</view>
					</view>
				</view>
					<view class="alpha-city" v-for="(alpha_cities,alpha) in alphabet_cities" :key="alpha">
						<view class="title" :id="alpha">{{alpha}}</view>
						<view class="alpha-city-content">
							<view class="alpha-city-item_flex" v-for="(alpha_city,index) in alpha_cities" :key="index">
								<view class="alpha-city-item text-hidden" v-for="(city,index2) in alpha_city" :key="index2">
									{{ city.name }}
								</view>
							</view>
							<view class="border"></view>
						</view>
					</view>
			</view>
		</scroll-view>
    </view>
</template>

<script>
	import { groupListToColumn } from "@/common/util.js"
	import { cities } from "@/common/city.js"
	
	export default {
		props:{
			
		},
		data() {
			return {
				"cityColumnNum":3,
				"alphabetColumnNum":6,
				"alphaCityColumnNum":4,
				"hotCityList":["北京","上海","三亚","香港","杭州","广州","成都"],
				"alphabetList":["A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","W","X","Y","Z"],
				"isStateIn":true,
				"windowHeight":0,
				"scrollIntoId":"state"
			}
		},
		mounted() {
		  this.getSystemInfo()
		},
		computed:{
			hotCities() {
				return groupListToColumn(this.hotCityList,this.cityColumnNum)
			},
			alphabet() {
				return groupListToColumn(this.alphabetList,this.alphabetColumnNum)
			},
			a_cities() {
				return groupListToColumn(cities.A,this.alphaColumnNum)
			},
			alphabet_cities() {
				let alphabet_cities = {};
				if(cities){
					for (let alpha in cities) {
						alphabet_cities[alpha] = groupListToColumn(cities[alpha],this.alphaCityColumnNum)
					}
				}			
				return alphabet_cities;
			}
		},
		methods:{
			 getSystemInfo() {
				uni.getSystemInfo().then(res => {
				  let [error, data] = res
				  this.windowHeight = `${data.windowHeight}px`
				})
			  },
			stateIn() {
				this.isStateIn=true;
			},
			stateOut() {
				this.isStateIn=false;
			},
			alphaClick(char) {
				console.log(this.$refs[char])
				this.scrollIntoId = char ? char : "state";
			}
		}
	}
</script>

<style scoped>
	.text{
		height: 40upx;
		line-height: 40upx;
		flex: 1;
		text-align: center;
		font-size: 28upx;
	}
	.actived{
		color: #ff570a;
		background-color: #fff;
	}
	
	.state{
		height: 60upx;
		padding: 0upx 100upx;
		background-color: #ff570a;
		color: white;
	}
	
	.state-box-out{
		padding-top: 0upx;
	}
	
	.state-box{
		height: 40upx;
		border: 1px solid #fff;
	}
	.content{
		background: #f5f5f5;
	}
	
	.title {
		height: 72upx;
		line-height: 72upx;
		padding-left: 25upx;
		font-size: 25upx;
	}
	
	.hot-city-content{
		background-color: #fff;
	}
	.hot-city-item_flex{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: -1px;
	}
	
	.hot-city-item{
		width: calc(100% / 3 - 1px);
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-color: #c8c7cc;
		border-style: solid;
		border-width: 1px;
		border-top-width: 0;
		border-left-width: 0;
	}
	
	.border{
		height: 1px;
		top: -1px;
		position: relative;
		background-color: #fff;
	}
	
	.alphabet-content{
		background-color: #fff;
	}
	
	.alphabet-item_flex{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: -1px;
	}
	
	.alphabet-item{
		width: calc(100% / 6);
		text-align: center;
		height: 90upx;
		line-height: 90upx;
		background-color: #fff;
	}
	
	.alpha-city-content{
		background-color: #fff;
	}
	
	.alpha-city-item_flex{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.alpha-city-item{
		width: calc(100% / 4 - 1px);
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		background-color: #fff;
		border-color: #c8c7cc;
		border-style: solid;
		border-width: 1px;
		border-top-width: 0;
		border-left-width: 0;
	}
	
	.text-hidden{
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
</style>
